<template>
<!-- 登录页面 -->
<div>
  <div class="logo-wrap w">
    <router-link to="/">
      <img class="logo-img" src="../../static/img/logo.png" alt="">
    </router-link>

      <!-- <p>欢迎登录</p> -->
    </div>
      <div class="container-wrap">
       <img src="../../static/img/5e5b07e623de3.jpg" class="container-bg" alt=""></img>
       <LoginBlock/>
  </div>
</div>

</template>

<script>
import store from '@/vuex/store';
import { mapActions } from 'vuex';
import LoginBlock from "@/components/authentication/Login"
export default {
  name: 'Login',
  data () {
    return {
      formDate: {
        username: '',
        password: ''
      },
      ruleInline: {
        username: [
          { required: true, message: this.$t('请输入手机号'), trigger: 'blur',  transform(value) {
            return value.trim();
          },}
        ],
        password: [
          { required: true, message: this.$t('请输入密码'), trigger: 'blur' },
          { type: 'string', min: 6, message: this.$t('密码不能少于6位'), trigger: 'blur' }
        ]
      }
    };
  },
  components:{
    LoginBlock
  },
  methods: {
    ...mapActions(['login']),
    handleSubmit (name) {
        const {formDate:{username:phone,password}} = this
        if(!phone){
         return this.$Message.error(this.$t('请输入手机号'))
        }

        if (!/^\d{5,15}$/.test(phone)){
          return this.$Message.error(this.$t('请正确的手机号'))
        }
      this.login({phone,password}).then(() => {

      })
    }
  }
};
</script>

<style lang="scss" scoped>
.footer {
  background-color: #f4f4f4!important;
}
.container{
  &-wrap{
  width: 100%;
  margin: 0 auto;
  height: 545px;
  position: relative;
  overflow: hidden;
  }
  &-bg{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
  }
}

.login-container {
  position: absolute;
  right: 200px;
}

.logo{
  &-wrap{
    padding:10px 0
  }
  &-img{
    width:150px
  }

}

.form{
  &-box{
  padding:40px 50px;
  margin: 20px auto;
  background-color: #Fff;
  }
}
.main-btn{
 height: 50px;
 background-color: #e2231a;
 border-radius: 0;
}
.bottom{
  text-align: center;
  color:#bcbcbc;
  &-link{
    color:#e2231a;
  }
}
</style>
